<template>
    <view class="page">
        <text class="page-title">重置密码</text>
        <view class="container">
            <view class="resetForm">

                <view class="form-item">
                    <view class="phone" @click="showPicker">
                        <text>{{ resetForm.code }}</text>
                        <uv-icon name="arrow-down" color="#fff" size="12"></uv-icon>
                    </view>
                    <input class="form-input" v-model="resetForm.cellphone" placeholder="请输入手机号" />
                </view>

                <view class="checkcode-item">
                    <view class="form-item checkcode">
                        <input class="form-input" v-model="resetForm.code" placeholder="请输入验证码" />
                    </view>

                    <view v-if="isActive && remainingTime === 60" class="sms-btn" @click="getSmsCode">
                        获取验证码</view>
                    <view v-if="isActive && remainingTime < 60" class="sms-btn disabled">
                        {{ remainingTime }}秒后重新获取
                    </view>
                    <view v-if="!isActive" class="sms-btn" @click="getSmsCode">获取验证码</view>
                </view>

                <view class="form-item">
                    <input class="form-input" password v-model="resetForm.password" placeholder="请输入密码" />
                </view>

                <view class="accept-item">
                    <view class="selected" :class="{ actived: resetForm.selected }"
                        @click="resetForm.selected = !resetForm.selected">
                    </view>
                    <view class="red">
                        <text class="read-text" @click="resetForm.selected = !resetForm.selected">阅读并接受</text>
                        <navigator class="read-url" open-type="navigate" url="/pages/agreement/agreement">《用户协议》
                        </navigator>
                        <navigator class="read-url" open-type="navigate" url="/pages/privacy/privacy">《隐私政策》</navigator>
                    </view>
                </view>
            </view>

            <view class="work-btn-style submit" @click="submitForm">确定</view>

            <uv-picker ref="picker" :columns="countryCode" keyName="chinese" @confirm="confirm"></uv-picker>

        </view>
    </view>
</template>

<script setup>
import {
    ref
} from 'vue';
import {
    onLoad
} from '@dcloudio/uni-app'

//api
import {
    apiSmsSend,
    apiResetPassword,
    apiCountrycode
} from '@/api/authApi.js'


//hooks
import useSmsCountdown from '../../hooks/useCountDown.js';
const {
    remainingTime,
    isActive,
    startCountdown,
    resetCountdown
} = useSmsCountdown(60);



//获取全世界国家的手机号码前缀
const getCountrycode = async () => {
    let res = await apiCountrycode()
    countryCode.value[0] = res.data
}

// 弹出手机前缀选择
const showPicker = () => {
    picker.value.open()
    console.log(countryCode.value);
}

// 选择手机前缀
const confirm = (e) => {
    resetForm.value.code = e.value[0].code
}

// 手机验证码登录表单
const resetForm = ref({
    authType: 'sms',
    code: '+86'
})
const countryCode = ref([])
const picker = ref(null)



//获取验证码
const getSmsCode = async () => {
    // 重置定时器
    resetCountdown()

    //判断手机号
    if (uni.$uv.trim(resetForm.value.cellphone) == '') {
        uni.showToast({
            title: '手机号不能为空',
            icon: "none"
        })
        return
    }

    // 获取短信
    await apiSmsSend({
        cellphone: resetForm.value.cellphone,
        type: 'password'
    })

    // 开启倒计时
    startCountdown()

}


// 提交表单
const submitForm = async () => {
    let res = await apiResetPassword(resetForm.value)

    uni.showToast({
        title: '重置密码成功',
        icon: "none"
    })

    setTimeout(() => {
        uni.navigateBack({
            delta: 1
        })
    }, 1000);

}

onLoad(() => {
    getCountrycode()
})
</script>

<style lang="scss" scoped>
.page {
    background: #1a1a1a;
    height: 100vh;
    width: 100vw;
}

.page-title {
    width: 100%;
    height: 32rpx;
    line-height: 32rpx;
    text-align: center;
    color: #fff;
    font-size: 32rpx;
    margin: 135rpx auto 112rpx;
}

.container {
    width: 622rpx;
    margin: 0 auto;

    .resetForm {
        width: 100%;

        .checkcode-item {
            margin-bottom: 40rpx;
            width: 622rpx;
            height: 80rpx;
            display: flex;
            justify-content: space-between;
        }

        .form-item {
            margin-bottom: 40rpx;
            width: 622rpx;
            height: 80rpx;
            background: #000000;
            border: 2rpx solid #4d4d4d;
            border-radius: 10rpx;
            padding: 0 30rpx;
            box-sizing: border-box;
            display: flex;
            align-items: center;

            .phone {
                color: #fff;
                font-size: 24rpx;
                font-weight: 500;
                margin-right: 16rpx;
                display: flex;
                flex-direction: row;
            }

            .form-input {
                font-size: 24rpx;
                color: #999;
                flex: 1;
            }

            &.checkcode {
                width: 374rpx;
            }

        }

        .sms-btn {
            width: 232rpx;
            height: 80rpx;
            background: #e6e6e6;
            border-radius: 10rpx;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 24rpx;
            color: #000;
            font-weight: 500;

            &.disabled {
                background: #999;
            }
        }

        .accept-item {
            height: 40rpx;
            width: 622rpx;
            display: flex;
            flex-direction: row;
            position: relative;

            .selected {
                width: 40rpx;
                height: 40rpx;
                background: #000000;
                border: 2rpx solid #999999;
                border-radius: 50%;
                position: relative;
                box-sizing: border-box;
                margin-right: 16rpx;

                &.actived {
                    &::after {
                        width: 20rpx;
                        height: 20rpx;
                        background: #ffcb30;
                        content: '';
                        position: absolute;
                        border-radius: 50%;
                        top: 8rpx;
                        left: 8rpx;
                    }
                }
            }

            .red {
                font-size: 24rpx;
                color: #999;
                font-weight: 500;
                display: flex;

                .read-text {
                    margin-right: 20rpx;
                }

                .read-url {
                    color: #FFCB30;
                }
            }

            .reset {
                font-size: 24rpx;
                color: #999;
                font-weight: 500;
                position: absolute;
                right: 0;
            }
        }
    }

    .submit {
        height: 96rpx;
        border-radius: 48rpx;
        margin-top: 80rpx;
        font-size: 32rpx;
        color: #000;
        font-weight: 500;
    }
}
</style>